<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>登录页面测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .test-section {
            background: white;
            padding: 20px;
            margin: 20px 0;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        .test-link {
            display: inline-block;
            padding: 10px 20px;
            background: #007bff;
            color: white;
            text-decoration: none;
            border-radius: 5px;
            margin: 5px;
        }
        .test-link:hover {
            background: #0056b3;
        }
        .domain-info {
            background: #e9ecef;
            padding: 10px;
            border-radius: 5px;
            margin: 10px 0;
        }
        .working-link {
            background: #28a745;
        }
        .working-link:hover {
            background: #1e7e34;
        }
        .note {
            background: #d4edda;
            border: 1px solid #c3e6cb;
            padding: 10px;
            border-radius: 5px;
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <h1>Vue 登录页面测试</h1>
    
    <div class="note">
        <strong>✅ 问题已解决！</strong>现在所有测试域名都可以正常访问了。
    </div>
    
    <div class="test-section">
        <h2>测试A样式（蓝紫色主题）</h2>
        <p>以下链接会触发A样式显示：</p>
        <div class="domain-info">
            <strong>触发条件：</strong>域名包含"a"、localhost、127.0.0.1
        </div>
        <a href="http://localhost:5173" class="test-link working-link" target="_blank">localhost:5173</a>
        <a href="http://127.0.0.1:5173" class="test-link working-link" target="_blank">127.0.0.1:5173</a>
        <a href="http://example-a.com:5173" class="test-link working-link" target="_blank">example-a.com:5173</a>
    </div>
    
    <div class="test-section">
        <h2>测试B样式（粉红色主题）</h2>
        <p>以下链接会触发B样式显示：</p>
        <div class="domain-info">
            <strong>触发条件：</strong>其他所有域名
        </div>
        <a href="http://example-b.com:5173" class="test-link working-link" target="_blank">example-b.com:5173</a>
        <a href="http://test.com:5173" class="test-link working-link" target="_blank">test.com:5173</a>
        <a href="http://demo.com:5173" class="test-link working-link" target="_blank">demo.com:5173</a>
    </div>
    
    <div class="test-section">
        <h2>如何测试不同样式</h2>
        <h3>方法1：直接点击链接（推荐）</h3>
        <p>点击上面的链接直接测试不同域名和样式</p>
        
        <h3>方法2：使用浏览器开发者工具</h3>
        <ol>
            <li>访问 <a href="http://localhost:5173" target="_blank">http://localhost:5173</a></li>
            <li>打开浏览器开发者工具（F12）</li>
            <li>在控制台中运行以下代码来模拟不同域名：</li>
        </ol>
        <div style="background: #f8f9fa; padding: 15px; border-radius: 5px; font-family: monospace;">
            <p><strong>模拟A样式（蓝紫色）：</strong></p>
            <code>window.location.hostname = 'example-a.com'; location.reload();</code>
            <br><br>
            <p><strong>模拟B样式（粉红色）：</strong></p>
            <code>window.location.hostname = 'example-b.com'; location.reload();</code>
        </div>
        
        <h3>方法3：修改hosts文件（已配置）</h3>
        <p>以下域名已映射到本地IP：</p>
        <div style="background: #f8f9fa; padding: 15px; border-radius: 5px; font-family: monospace;">
            <code>127.0.0.1 example-a.com</code><br>
            <code>127.0.0.1 example-b.com</code><br>
            <code>127.0.0.1 test.com</code><br>
            <code>127.0.0.1 demo.com</code>
        </div>
    </div>
    
    <div class="test-section">
        <h2>样式说明</h2>
        <h3>A样式（蓝紫色渐变）</h3>
        <ul>
            <li>背景：蓝紫色渐变 (#667eea → #764ba2)</li>
            <li>标题：蓝紫色</li>
            <li>按钮：蓝紫色渐变</li>
            <li>文字：欢迎登录 - 系统A</li>
        </ul>
        
        <h3>B样式（粉红色渐变）</h3>
        <ul>
            <li>背景：粉红色渐变 (#f093fb → #f5576c)</li>
            <li>标题：粉红色</li>
            <li>按钮：粉红色渐变</li>
            <li>文字：系统B登录</li>
        </ul>
    </div>
    
    <div class="test-section">
        <h2>当前状态</h2>
        <p><strong>开发服务器：</strong> <span style="color: #28a745;">✅ 运行中</span></p>
        <p><strong>访问地址：</strong> <a href="http://localhost:5173" target="_blank">http://localhost:5173</a></p>
        <p><strong>测试页面：</strong> <a href="http://localhost:5173/test.html" target="_blank">http://localhost:5173/test.html</a></p>
        <p><strong>域名访问：</strong> <span style="color: #28a745;">✅ 已配置允许所有测试域名</span></p>
    </div>
    
    <div class="test-section">
        <h2>快速测试工具</h2>
        <p>点击下面的按钮来快速测试不同样式：</p>
        <button onclick="showStyleA()" style="background: #667eea; color: white; border: none; padding: 10px 20px; border-radius: 5px; margin: 5px; cursor: pointer;">测试A样式（蓝紫色）</button>
        <button onclick="showStyleB()" style="background: #f093fb; color: white; border: none; padding: 10px 20px; border-radius: 5px; margin: 5px; cursor: pointer;">测试B样式（粉红色）</button>
        <button onclick="showCurrentStyle()" style="background: #6c757d; color: white; border: none; padding: 10px 20px; border-radius: 5px; margin: 5px; cursor: pointer;">显示当前样式</button>
        <button onclick="showHelp()" style="background: #17a2b8; color: white; border: none; padding: 10px 20px; border-radius: 5px; margin: 5px; cursor: pointer;">显示帮助</button>
    </div>
</body>

<script src="demo.js"></script>
</html> 